<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试第六题</title>
</head>

<body>
    <div>
        <button id="btn1">将吃鸡放到所有城市后面</button>
        <button id="btn2">将吃鸡放到所有城市前面</button>
        <button id="btn3">将吃鸡放到上海的后面</button>
        <button id="btn4">将吃鸡放到上海的前面</button>
        <button id="btn5">删除北京</button>
        <button id="btn6">删除所有节点</button>
    </div>
    <ul>
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
<script>
    let parNode = document.getElementById('beijing').parentNode;//获取某个子元素的父节点
    let chiji = document.getElementById('chiji');//获取吃鸡的Id

    //将吃鸡放到所有城市后面
    document.getElementById('btn1').addEventListener('click', function () {
        let wangzherongyao = document.getElementById('wangzherongyao');
        parNode.insertBefore(chiji, wangzherongyao);
    });

    //将吃鸡放到所有城市前面
    document.getElementById('btn2').addEventListener('click', function () {
        parNode.insertBefore(chiji, parNode.firstChild);
    });

    //将吃鸡放到上海的后面
    document.getElementById('btn3').addEventListener('click', function () {
        let zhengzhou = document.getElementById('zhengzhou');
        parNode.insertBefore(chiji, zhengzhou);
    });

    //将吃鸡放到上海的前面
    document.getElementById('btn4').addEventListener('click', function () {
        let shanghai = document.getElementById('shanghai');
        parNode.insertBefore(chiji, shanghai);
    });

    //删除北京
    document.getElementById('btn5').addEventListener('click', function () {
        let beijing = document.getElementById('beijing');
        //出现异常继续执行
        try {
            parNode.removeChild(beijing);
        } catch (error) {
            //打印异常
            console.log(error);
        }
    });

    //删除所有节点
    document.getElementById('btn6').addEventListener('click', function () {
        while (parNode.firstChild) {
            parNode.removeChild(parNode.firstChild);
        }

        //循环所有按钮 设置为禁用
        let button = document.getElementsByTagName('button');
        for (let i = 0; i < button.length; i++) {
            button[i].setAttribute('disabled', '');
        }
    });
</script>

</html>